<template>
  <div class="search-box">
    <input type="text" placeholder="新年招募，小白学插画" />
    <span class="iconfont icon-fangdajing"></span>
  </div>
</template>


<script>
export default {
  name: "Search",
  data() {
    return {
      msg: "hi",
    };
  },
};
</script>

<style scoped>
@import url(../../iconfont/iconfont.css);
.search-box{
  width: 100%;
     height: .6rem;
     line-height: .6rem;
    position: relative;
    background: white;
}

.search-box input{
    display: block;
    width: 80%;
    height: 0.4rem;
    line-height: .4rem;
    border-radius:0.1rem; 
    margin: 0.05rem auto;
    outline: none;
    background-color: #f7f7f7;
    color: #909090;
    text-indent: 0.45rem;
    border: none;
    text-align: center;
    font-size: .14rem;
}

.search-box span{
    position: absolute;
    left: calc( 5% + 0.1rem) ;
    top: 45% ;
    transform: translateY(-63%);
    font-size: 0.14rem;
    left: 30%;
}
</style>
